<#include "../layout/layout.ftl">
<#macro overrideHead>
    <title>博客列表</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap-table.css">
<link rel="stylesheet" href="/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="/js/bootstrap-table.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="/js/bootstrap-table-zh-CN.js"></script>
<script src="/js/bootstrap-select.js"></script>

</#macro>
<#macro overrideContainer>
<div id="page-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <ol class="breadcrumb">
                    <li class="active">
                        全部博客列表
                    </li>
                </ol>
                <hr>
            </div>
        </div>


        <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
            <div class="form-inline" style="margin-left: 5px;margin-bottom: 10px;">
                <div class="form-group">
                    <label for="queryAuthor">作者：</label>
                    <input id="queryAuthor" class="form-control input-sm">
                </div>
                <div class="form-group">
                    <label for="queryTitle">标题：</label>
                    <input id="queryTitle" class="form-control input-sm">
                </div>
                <div class="form-group">
                    <label for="queryTitle">状态：</label>
                    <select class="selectpicker" id="queryPersonal">
                        <option value="-1">全部</option>
                        <option value="0">公开</option>
                        <option value="3">隐藏</option>
                    </select>
                </div>
                <button class="btn btn-primary" id="queryBtn" style="margin-left: 20px">查询</button>


                <button id="btn_edit" type="button" class="btn btn-outline-primary" style=""
                        onclick="modifyPer(null,null)">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                </button>
                <button id="btn_delete" type="button" class="btn btn-outline-danger" onclick="deleteBlog(null)">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>

            </div>

        </div>


        <div class="row">
            <div class="col-lg-12">
                <table id="blog_table" data-smart-display="true">
                </table>
            </div>
        </div>
    </div>
</div>
</#macro>
<#macro overrideScript>
<script>

    /**
     *  修改状态
     * @param id
     */
    function modifyPer(id, stutas) {
        if (stutas == null && id == null) {
            var dataArray = $('#blog_table').bootstrapTable('getAllSelections');
            if (dataArray.length < 1) {
                layer.msg("请先选中要修改的博文！", {time: 1000});
                return null;
            }

        }
        //询问框
        layer.confirm('你确定修改此博文的状态吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            var data = [{id: id, personal: stutas}];
            // 单个修改
            if (id != null) {
                $.post("/back/admin/update/blogstatus", {"blogs": JSON.stringify(data)}, function (result) {
                    layer.msg(result.result, {icon: 1});
                    $table1.bootstrapTable('selectPage', 1);
                });
            } else {
                // 批量修改
                var dataArray = $('#blog_table').bootstrapTable('getAllSelections');
                for (let obj of dataArray) {
                    delete obj["select"];
                }
                var blogs = JSON.stringify(dataArray);
                $.post("/back/admin/update/blogstatus", {"blogs": blogs}, function (result) {
                    layer.msg(result.result, {icon: 1});
                    $table1.bootstrapTable('selectPage', 1);
                }, "json");
            }

        }, function () {

        });


    }

    /**
     *  删除该博文
     * @param id
     */
    function deleteBlog(id) {
        if (id == null) {
            layer.msg("请先选中要删除的博文！", {time: 1000});
            return false;
        }
        layer.confirm('你确定删除此博文吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            // 删除博文
            // 批量删除
            var dataArray = $('#blog_table').bootstrapTable('getAllSelections');
            var idArray = new Array();
            for (var i = 0; i < dataArray.length; i++) {
                var json = eval(dataArray[i]);
                idArray[i] = json.id;
            }
            $.post("/back/admin/delete/blog", {"ids": idArray.join(",")}, function (result) {
                layer.msg(result.result, {icon: 1});
                $table1.bootstrapTable('refresh');
            });

        }, function () {

        });
    }

</script>
<script>
    $(function () {

        $(".side-nav").children("li").eq(4).addClass("active");

        // BootStrap Table 列属性
        var columns = [
            {
                field: "select",
                checkbox: true,
                width: 25,
                align: 'center',
                valign: 'middle'
            },
            {
                field: 'id',
                align: 'center',
                title: 'ID'
                //visible:false
            }, {
                field: 'title',
                align: 'center',
                title: '标题'
            }, {
                field: 'author',
                align: 'center',
                title: '作者',
                width: 120//宽度
            }, {
                field: 'createTime',
                align: 'center',
                title: '发表时间',
                width: 120,//宽度
                formatter:function (value, row, index) {
                    return new Date(row.createTime).format("yyyy-MM-dd hh:mm:ss");
                }
            }, {
                field: 'lastModifyTime',
                align: 'center',
                title: '修改时间',
                width: 120,//宽度
                formatter:function (value, row, index) {
                    return new Date(row.createTime).format("yyyy-MM-dd hh:mm:ss");
                }
            }
            , {
                field: 'personal',
                align: 'center',
                title: '状态',
                formatter: function (value, row, index) {
                    //通过formatter可以自定义列显示的内容
                    //value：当前field的值，即id
                    //row：当前行的数据
                    if (row.personal === 0) {
                        return "<span class='badge'  style='padding:5px 10px;background-color: green'>" + "公开" + "</span>";
                    } else {
                        return "<span class='badge'  style='padding:5px 10px;background-color: red'>" + "隐藏" + "</span>";

                    }
                }
            }, {
                title: '操作',
                align: 'center',
                width: 200,//宽度
                formatter: function (value, row, index) {
                    //通过formatter可以自定义列显示的内容
                    //value：当前field的值，即id
                    //row：当前行的数据
                    return [
                        '<button type="button" class="btn btn-outline-primary" style="margin:10px" onclick="modifyPer(' + row.id + ',' + row.personal + ')">' +
                        '<i class="fa fa-edit" style="margin-right: 5px"></i>修改' +
                        '</button>',
                        '<button type="button" class="btn btn-outline-danger"  onclick="deleteBlog(' + row.id + ')">' +
                        '<i class="fa fa-trash" style="margin-right: 5px"></i>删除' +
                        '</button>'
                    ].join('');
                }
            }];

        //根据窗口调整表格高度
        $(window).resize(function () {
            // $('#blog_table').bootstrapTable('resetView', {
            //     height: tableHeight()
            // })
        });

        //tableHeight函数
        function tableHeight() {
            //可以根据自己页面情况进行调整
            return $(window).height() - 250;
        }

        // table 初始化
        $table1 = $('#blog_table').bootstrapTable({
            url: '/back/admin/data/blogList',
            queryParams: function (params) {
                return {
                    offset: params.offset,
                    limit: params.limit,
                    author: $('#queryAuthor').val(),
                    title: $('#queryTitle').val(),
                    personal: $("#queryPersonal").val()
                }
            },
            columns: columns,
            pagination: true,
            toolbar: '#toolbar',
            toolbarAlign: 'left',//工具栏对齐方式
            buttonsAlign: 'left',//按钮对齐方式
            pageList: [5, 10, 20, 50],
            sidePagination: 'server',//服务器端分页
            pageSize: 10,
            clickToSelect: true,
            smartDisplay: true
            //search:true
            //searchOnEnterKey:true,
            //detailView:true,//设置为 true 可以显示详细页面模式,每行前面有个加号+
            //cardView:true
            //showRefresh:true,//刷新按钮
        });
        //刷新方法
        $('#heartBtn').click(function () {
            $table1.bootstrapTable('refresh');
        });

        // 点击查询按钮,设置跳转到第一页
        $('#queryBtn').click(function () {
            var age = $('#queryAgeText').val();
            $table1.bootstrapTable('selectPage', 1);
            //$table1.bootstrapTable('refresh');
        });


    });
</script>
</#macro>
<@layout head=overrideHead container=overrideContainer script=overrideScript>
</@layout>